<template>
	<view class="content">
		<homeHeader></homeHeader>
		<!-- 轮播图 -->
		<view class="swiper">
			<view class="swiper-box">
				<swiper circular="true" autoplay="true" @change="handalSwiperChange">
					<swiper-item v-for="swiper in swiperList" :key="swiper.id">
						<image :src="swiper.img"></image>
					</swiper-item>
				</swiper>
				<view class="indicator">
					<view :class="{'on':currentSwiper >= index}" class="dots" v-for="(swiper,index) in swiperList" :key="index"></view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import homeHeader from "./header.vue"
	import interfaces from "../../../utils/interfaces.js"
	export default{
		components:{
			homeHeader
		},
		data(){
			return{
				swiperList: [], // 轮播图片
				categoryList: [], // 分类
				promotion: [], // 活动
				currentSwiper: 0
			}
		},
		onLoad() {
			this.initData();
		},
		methods:{
			initData() {
				this.request({
					url: interfaces.getMallData,
					success: ((res) => {
						// console.log(res);
						this.swiperList = res.data.swiperList;
						this.categoryList = res.data.categoryList;
						this.promotion = res.data.promotion;
					})
				});
			},
			handalSwiperChange:function(val){
				this.currentSwiper = val.detail.current;
			}
		}
	}
</script>

<style  lang="scss" >
	.swiper {
		width: 100%;
		margin-top: 10upx;
		display: flex;
		justify-content: center;
	
		.swiper-box {
			width: 92%;
			height: 30.7vw;
			overflow: hidden;
			border-radius: 15upx;
			box-shadow: 0upx 8upx 25upx rgba(0, 0, 0, 0.2);
			//兼容ios，微信小程序
			position: relative;
			z-index: 1;
	
			swiper {
				width: 100%;
				height: 30.7vw;
	
				swiper-item {
					image {
						width: 100%;
						height: 40vw;
					}
				}
			}
	
			.indicator {
				position: absolute;
				bottom: 20upx;
				left: 20upx;
				background-color: rgba(255, 255, 255, 0.4);
				width: 150upx;
				height: 5upx;
				border-radius: 3upx;
				overflow: hidden;
				display: flex;
	
				.dots {
					width: 0upx;
					background-color: rgba(255, 255, 255, 1);
					transition: all 0.3s ease-out;
	
					&.on {
						width: (100%/3);
					}
				}
			}
		}
	}
</style>
